<template>
  <el-drawer
    title="保存SQL创建配置"
    size="60%"
    :visible.sync="drawerVisible"
    direction="rtl"
    :close-on-press-escape="false"
    :wrapperClosable="false"
    :destroy-on-close="true"
    :before-close="beforeClose"
    custom-class="tag-drawer sql-calculate-drawer"
    v-drawerResize
  >
    <div class="drawer-wrap">
      <div class="drawer-content tag-scrollbar">
        <el-form :model="editForm" label-width="120px" :rules="editFormRules" ref="editForm">
          <el-form-item label="标签名称" prop="tagNm">
            <el-input v-model="editForm.tagNm" placeholder="请输入标签名称"></el-input>
          </el-form-item>
          <el-form-item label="字段名称" prop="columnsNm">
            <el-input
              v-model="editForm.columnsNm"
              placeholder="请输入字段名称(英文、数字或下划线)"
              :disabled="editForm.tagId.length > 0"
            ></el-input>
          </el-form-item>
          <el-form-item label="标签故事" prop="tagStory">
            <el-input
              placeholder="请输入标签故事"
              v-model="editForm.tagStory"
              type="textarea"
              :maxlength="1000"
              :rows="5"
              :show-word-limit="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="字段类型" prop="valueType">
            <el-select v-model="editForm.valueType" placeholder="请选择字段类型">
              <el-option label="---" value=""></el-option>
              <el-option
                v-for="item in $dictList('value_type')"
                :key="item.key"
                :label="item.value"
                :value="item.key"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="更新频率" prop="execFrequency">
            <el-radio-group v-model="editForm.execFrequency">
              <el-radio v-for="item in $dictList('$exec_frequency')" :key="item.key" :label="item.key">
                {{ item.value }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <template v-if="editForm.execFrequency">
            <el-form-item label="执行日期" prop="execDtList" v-if="editForm.execFrequency === 2" class="rate-form">
              <el-checkbox-group v-model="editForm.execDtList">
                <el-checkbox v-for="date in 31" :label="date" :key="date">{{ date }}</el-checkbox>
                <el-checkbox :label="999">月末</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="执行星期" prop="execWkList" v-if="editForm.execFrequency === 3" class="rate-form">
              <el-checkbox-group v-model="editForm.execWkList">
                <el-checkbox v-for="week in 7" :label="week" :key="week">{{ weekShow(week) }}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="执行时间" prop="execTm">
              <el-col :span="12">
                <el-time-picker
                  v-model="editForm.execTm"
                  size="mini"
                  placeholder="执行时间"
                  value-format="HH:mm:ss"
                ></el-time-picker>
              </el-col>
            </el-form-item>
          </template>
          <template v-if="editForm.execFrequency">
            <el-form-item label="断点重跑" prop="rerun">
              <el-col :span="12">
                <el-switch active-color="#13ce66" v-model="editForm.rerun"> </el-switch>
              </el-col>
            </el-form-item>
            <el-form-item label="最大重跑次数" prop="rerunTime" v-if="editForm.rerun">
              <el-col :span="12">
                <el-input-number
                  v-model="editForm.rerunTime"
                  :min="1"
                  :max="10"
                  :step="1"
                  step-strictly
                ></el-input-number>
              </el-col>
            </el-form-item>
          </template>
        </el-form>
      </div>
    </div>
    <div class="drawer-btns">
      <el-button @click="beforeClose">取消</el-button>
      <el-button type="primary" size="medium" @click="save">确定</el-button>
    </div>
  </el-drawer>
</template>

<script>
export default {
  data() {
    const fieldValidator = (rule, value, callback) => {
      let patt = /^[0-9a-zA-Z_]{1,}$/
      if (!patt.test(value)) {
        return callback(new Error('字段名称只能输入字母数字和下划线'))
      } else {
        const avalue = [...new Set(value.trim().split(''))]
        if (!isNaN(value)) {
          return callback(new Error('字段名称不能为纯数字'))
        } else if (!isNaN(value.substr(0, 1))) {
          return callback(new Error('字段名称首字母不能为数字'))
        } else if (avalue.length == 1 && avalue[0] === '_') {
          return callback(new Error('字段名称不能为纯下划线'))
        } else return callback()
      }
    }
    return {
      drawerVisible: false,
      editForm: {
        groupId: '',
        tagId: '',
        tagNm: '',
        columnsNm: '',
        tagStory: '',
        valueType: '',
        execFrequency: '',
        expression: '',
        tagConfigJson: [],
        previewResults: [],
        execDtList: [],
        execWkList: [],
        execTm: '',
        rerun: false,
        rerunTime: 1
      },
      editFormRules: {
        tagNm: [
          { required: true, message: '标签名称不能为空', trigger: 'blur' },
          { validator: this.$checkEmpty('标签名称不能为空'), trigger: 'blur' }
        ],
        columnsNm: [
          { required: true, message: '字段名称不能为空', trigger: 'blur' },
          { validator: this.$checkEmpty('字段名称不能为空'), trigger: 'blur' },
          { validator: fieldValidator, trigger: 'blur' }
        ],
        tagStory: [
          { required: true, message: '标签故事不能为空', trigger: 'blur' },
          { validator: this.$checkEmpty('标签故事不能为空'), trigger: 'blur' }
        ],
        valueType: [{ required: true, message: '字段类型不能为空', trigger: 'change' }],
        execFrequency: [{ required: true, message: '更新频率不能为空', trigger: 'change' }],
        execDtList: [{ required: true, type: 'array', min: 1, message: '至少要选择一项', trigger: 'change' }],
        execWkList: [{ required: true, type: 'array', min: 1, message: '至少要选择一项', trigger: 'change' }],
        execTm: [{ required: true, message: '执行时间不能为空', trigger: 'change' }],
        rerunTime: [{ required: true, message: '最大重跑次数不能为空', trigger: 'change' }]
      }
    }
  },
  methods: {
    showDrawer(params) {
      this.editForm.groupId = params.groupId
      this.editForm.tagId = params.tagId
      this.editForm.tagNm = params.tagNm
      this.editForm.columnsNm = params.columnsNm
      this.editForm.tagStory = params.tagStory
      this.editForm.valueType = params.valueType
      this.editForm.execFrequency = params.execFrequency
      this.editForm.expression = params.expression
      this.editForm.execDtList = params.execDtList || []
      this.editForm.execWkList = params.execWkList || []
      this.editForm.execTm = params.execTm || ''
      this.editForm.rerun = params.rerun
      this.editForm.rerunTime = params.rerunTime
      this.editForm.tagConfigJson = params.tagConfigJson
      this.editForm.previewResults = params.previewResults
      this.drawerVisible = true
    },
    weekShow(week) {
      let str = ''
      switch (week) {
        case 1:
          str = '日'
          break
        case 2:
          str = '一'
          break
        case 3:
          str = '二'
          break
        case 4:
          str = '三'
          break
        case 5:
          str = '四'
          break
        case 6:
          str = '五'
          break
        case 7:
          str = '六'
          break
      }
      return str
    },
    beforeClose() {
      this.editForm.groupId = ''
      this.editForm.tagId = ''
      this.editForm.tagNm = ''
      this.editForm.columnsNm = ''
      this.editForm.tagStory = ''
      this.editForm.valueType = ''
      this.editForm.execFrequency = ''
      this.editForm.expression = ''
      this.editForm.execDtList = []
      this.editForm.execWkList = []
      this.editForm.execTm = ''
      this.editForm.rerun = false
      this.editForm.rerunTime = 1
      this.editForm.tagConfigJson = []
      this.editForm.previewResults = []
      this.drawerVisible = false
    },
    save() {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          let params = {
            tagConfigJson: this.editForm.tagConfigJson,
            previewResults: this.editForm.previewResults,
            tagNm: this.editForm.tagNm,
            columnsNm: this.editForm.columnsNm,
            tagStory: this.editForm.tagStory,
            valueType: this.editForm.valueType,
            execFrequency: this.editForm.execFrequency,
            expression: this.editForm.expression,
            execDtList: this.editForm.execDtList,
            execWkList: this.editForm.execWkList,
            execTm: this.editForm.execTm,
            rerun: this.editForm.execFrequency ? this.editForm.rerun : false,
            rerunTime: this.editForm.execFrequency ? this.editForm.rerunTime : 0
          }
          if (this.editForm.groupId) params.groupId = this.editForm.groupId
          if (this.editForm.tagId) params.tagId = this.editForm.tagId
          this.$ajax({
            url: this.$ajax.setUrl(
              this.editForm.tagId ? 'der/derTagSqlCreate/updateSqlCreate' : 'der/derTagSqlCreate/saveSqlCreate'
            ),
            method: 'post',
            data: this.$ajax.setData(params)
          }).then(({ data }) => {
            if (data && data.code === '0') {
              this.$emit('callback', {
                tagId: this.editForm.tagId || data.data,
                tagNm: this.editForm.tagNm,
                tagStory: this.editForm.tagStory,
                valueType: this.editForm.valueType,
                columnsNm: this.editForm.columnsNm,
                execFrequency: this.editForm.execFrequency,
                execTm: this.editForm.execTm,
                execWkList: this.editForm.execWkList,
                execDtList: this.editForm.execDtList,
                rerun: this.editForm.rerun,
                rerunTime: this.editForm.rerunTime
              })
              this.beforeClose()
              this.$message.success(data.msg)
            } else {
              this.$message.error(data.data || data.msg)
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss"></style>
